<template>
  <div id="main">
    <el-divider id="convas"></el-divider>
    <div class="judgeBox">
      <div class="top">
        <div v-for="(item, index) in 10" :key="index">
          <div class="num" @mousedown="copyNum(item - 1, $event)"
            :style="{ backgroundImage: 'url(' + urlArr[item - 1].url + ')' }"></div>
        </div>
      </div>
      <div class="center">
        <div class="topic">
          <div class="num">{{ num1 }}</div>
          <div class="add">+</div>
          <div class="num">{{ num2 }}</div>
          <div class="equal">=</div>
          <div class="total">
            <div class="item" @mouseenter="getTotal1" @mouseleave="leaveTotal">{{ total1 }}</div>
            <div class="item" @mouseenter="getTotal2" @mouseleave="leaveTotal">{{ total2 }}</div>
          </div>
        </div>
        <el-button type="primary" @click="nextTopic" :disabled="nextDis">下一题</el-button>
      </div>
      <div class="bottom">
        <div class="alltopic">
          <div class="topics" style="margin-left: 40px;">
            <div v-for="(item, index) in leftTopic" :key="index" class="topic">
              <div class="item">{{ item.topic }}</div>
              <div class="result">{{ item.result }}</div>
            </div>
          </div>
          <div class="topics" style="margin-left: 15px;">
            <div v-for="(item, index) in rightTopic" :key="index" class="topic">
              <div class="item">{{ item.topic }}</div>
              <div class="result">{{ item.result }}</div>
            </div>
          </div>





        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0, // 第一个加数
      num2: 0, // 第二个加数
      total1: '', // 总和的 第一个数字
      total2: '', // 总和的 第二个数字
      judge: '', // 判断 total1 或 total2
      leftTopic: [], // 左侧所有题数组
      rightTopic: [], // 右侧所有题数组
      urlArr: [
        { url: require('@/components/game/judgeDemo/images/num0.png') },
        { url: require('@/components/game/judgeDemo/images/num1.png') },
        { url: require('@/components/game/judgeDemo/images/num2.png') },
        { url: require('@/components/game/judgeDemo/images/num3.png') },
        { url: require('@/components/game/judgeDemo/images/num4.png') },
        { url: require('@/components/game/judgeDemo/images/num5.png') },
        { url: require('@/components/game/judgeDemo/images/num6.png') },
        // { url: require('@/components/judgeDemo/images/num7.png') },
        { url: require('@/components/game/judgeDemo/images/num8.png') },
        { url: require('@/components/game/judgeDemo/images/num9.png') },
        { url: require('@/components/game/judgeDemo/images/num0.png') },
      ]

    }
  },
  computed: {
    nextDis() {
      if (this.leftTopic.length == 5 && this.rightTopic.length == 5) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.num1 = Math.floor(Math.random() * 50)
    this.num2 = Math.floor(Math.random() * 50)
    let judgeBox = document.getElementsByClassName('judgeBox')[0]


  },
  methods: {
    // 0 - 9 数字的拖动事件
    copyNum(num, $event) {
      let judgeBox = document.getElementsByClassName('judgeBox')[0]
      let copyNum = document.getElementsByClassName('num')[num].cloneNode(true)
      // console.log('FFFFFF', judgeBox)
      // console.log('FFFFFF', document.getElementsByClassName('num'))
      judgeBox.appendChild(copyNum)
      copyNum.style.position = 'absolute'
      copyNum.style.top = $event.clientY + 'px'
      copyNum.style.left = $event.clientX + 'px'
      // 注册鼠标移动事件处理函数
      judgeBox.onmousemove = function (event) {
        copyNum.style.top = event.clientY + 'px'
        copyNum.style.left = event.clientX + 'px'
      }
      // 注册松开鼠标事件处理函数
      judgeBox.onmouseup = () => {
        judgeBox.onmousemove = judgeBox.onmouseup = null
        judgeBox.removeChild(copyNum)
        console.log('FFFFFFFFF', num, this.judge)
        if (this.judge == 'total1') { this.total1 = num; this.judge = ''; console.log('getTotal1-------', this.judge) }
        if (this.judge == 'total2') { this.total2 = num; this.judge = ''; console.log('getTotal1-------', this.judge) }
      }

    },
    // 总和的 第一个数字 鼠标移入事件
    getTotal1() { this.judge = 'total1'; console.log('getTotal1-------', this.judge) },
    // 总和的 第二个数字 鼠标移入事件
    getTotal2() { this.judge = 'total2'; console.log('getTotal2-------', this.judge) },
    // 总和的 第一个数字 + 第二个数字 鼠标移出事件
    leaveTotal() { },
    // 下一题 按钮点击事件
    nextTopic() {
      let total = Number(this.total1) * 10 + Number(this.total2)
      let topic = this.num1 + ' + ' + this.num2 + ' = ' + total
      let result = ''
      if ((this.num1 + this.num2) == total) {
        result = '√'
      } else {
        result = 'X'
      }
      if (this.leftTopic.length < 5) {
        this.leftTopic.push({ topic: topic, result: result })
        console.log('GGGGGGG', this.leftTopic)
      } else {
        this.rightTopic.push({ topic: topic, result: result })
        console.log('GGGGGGG', this.rightTopic)
      }
      // this.num1 + this.num2 设置成随机数
      this.num1 = Math.floor(Math.random() * 50)
      this.num2 = Math.floor(Math.random() * 50)
      this.total1 = ''
      this.total2 = ''
      this.judge = ''

    }

  }

}
</script>

<style scoped>
::v-deep .el-buttom {
  width: 200px;
  height: 80px;
  font-size: 50px;

}

.judgeBox {
  width: 1300px;
  height: 720px;
  border: 1px solid #666;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-size: 100%, 100%;
  background-image: url('@/components/game/judgeDemo/images/beijing1.png');
  /* opacity: 0.8; */
  /* position: relative; */
}

.top {
  width: 80%;
  height: 100px;
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* .img {

} */

.top .num {
  width: 50px;
  height: 80px;
  border: 3px solid deepPink;
  border-radius: 20px;
  background-size: 100% 100%;
  font-size: 30px;
  font-weight: bold;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
}

.center {
  width: 100%;
  height: 100px;
  border: 1px solid blue;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.center .topic {
  width: 50%;
  height: 100px;
  border: 1px solid blue;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  line-height: 80px;
  text-align: center;

}

.center .topic .num {
  width: 80px;
  height: 80px;
  border: 2px solid #666;
  background: #fcd0d0;
  user-select: none;
}

.center .topic .total {
  width: 120px;
  height: 80px;
  /* border: 2px solid #666; */
  /* background: #fcd0d0; */
  display: flex;
  justify-content: space-between;

}

.center .topic .total .item {
  width: 50px;
  height: 80px;
  border: 2px solid #666;
  background: #fcd0d0;
  cursor: pointer;
}

.bottom {
  width: 100%;
  height: 480px;
  border: 1px solid red;
}

.bottom .alltopic {
  width: 61%;
  height: 100%;
  border: 1px solid green;
  background-size: 100%, 100%;
  background-image: url('@/components/game/judgeDemo/images/book.png');
  background-repeat: no-repeat;
  /* background-size: 100%, 100%; */
  display: flex;
  /* justify-content: space-between; */
  /* padding: 50px; */
}

.bottom .alltopic .topics {
  width: 40%;
  height: 85%;
  margin-top: 30px;
  border: 2px solid red;
}

.bottom .alltopic .topics .topic {
  width: 300px;
  height: 20%;
  font-size: 30px;
  font-weight: bold;
  line-height: 80px;
  /* text-align: center; */
  display: flex;
  justify-content: space-between;
}

.bottom .alltopic .topics .topic .item {
  width: 270px;
  height: 100%;
  border-bottom: 1px solid black;
}

.bottom .alltopic .topics .topic .result {
  width: 80px;
  height: 100%;
  border-bottom: 1px solid black;
}
</style>